<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" width="80%" destroy-on-close @closed="$emit('closed')" align-center :close-on-click-modal="false">
        <el-container>
            <el-header>
                <div class="right-panel-search">
                    <div class="search-input">时间查询</div>
                        <el-date-picker v-model="search.time_range" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :size="size" :value-format="'YYYY-MM-DD'" style="width:250px" />
                    <div class="search-input">合同号</div>
                    <el-input v-model="search.keyword" placeholder="请输入合同号" />
                    <el-button type="primary" icon="el-icon-search" @click="upsearch">搜索</el-button>
                    <el-button type="primary" icon="el-icon-printer" @click="print" :disabled="selection.length==0">织机条码打印</el-button>
                </div>
            </el-header>
            <el-main>
                <scTable ref="table" :apiObj="apiObj" @selection-change="selectionChange" stripe remoteSort remoteFilter border height="600" :params="query">
                    <el-table-column type="selection" width="40"></el-table-column>
                    <el-table-column fixed label="合同号" align="center" width="160">
                        <template #default="{row}">
                            <div>{{row.contract_no}}</div>
                            <div>{{row.create_time}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="商品信息" fixed prop="goods" align="center" width="300">
                        <template #default="{row}">
                            <div class="shopInfo" v-if="row.goods">
                                <el-image class="img" :src="row.goods.goods_image" :preview-src-list="row.goods.goods_image_item" :initial-index="0" fit="cover" preview-teleported="true" />
                                <div class="right">
                                    <div>工厂货号：{{row.factory_number}}</div>
                                    <div>批次号：{{row.batch_number}}</div>
                                    <!-- <div>SKC：{{row.skc}}</div>
                                    <div>商品品牌：{{row.brand_name}}</div> -->
                                    <div>客户：{{row.custom_name}}</div>
                                    <div>颜色：{{row.goods.colour}}</div>
                                    <div v-if="row.sizeCate">商品类别：{{row.sizeCate.title}}</div>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column fixed label="尺码" align="center">
                        <template #default="{row}">
                                <div v-for="(item,index) in row.orderDetail" :key="index">
                                    {{item.goods_size}}
                                </div>
                            </template>
                    </el-table-column>
                    <!-- <el-table-column fixed label="待发数量" prop="total_count" align="center"> -->
                    <el-table-column fixed label="计划生产数量" prop="total_count" align="center">
                        <template #default="{row}">
                                <div v-for="(item,index) in row.orderDetail" :key="index">
                                    {{item.num}}
                                </div>
                            </template>
                    </el-table-column>
                    <el-table-column fixed label="缝挑数量" prop="total_count" align="center">
                        <template #default="{row}">
                                <div v-for="(item,index) in row.orderDetail" :key="index">
                                    {{item.weaving_num}}
                                </div>
                            </template>
                    </el-table-column>
                    <el-table-column label="要求完成日期" prop="due_date" align="center"></el-table-column>
                    <el-table-column label="首次交期" prop="first_delivery_date" align="center"></el-table-column>
                    <!-- <el-table-column label="下单人" prop="creator_name" align="center"></el-table-column> -->
                    <el-table-column label="制单人" prop="creator_name" align="center"></el-table-column>
                    <el-table-column label="承制人" prop="referred_as" align="center"></el-table-column>
                    <el-table-column label="价格" prop="price" align="center"></el-table-column>
                </scTable>
            </el-main>
            <el-footer>
                <div style="display:flex;justify-content: end;">
                    <el-button @click="visible=false" >取消</el-button>
                </div>
            </el-footer>
        </el-container>
        <print ref="pitDialog"></print>
	</el-dialog>
</template>

<script>
import print from '@/views/order/print.vue';
	export default {
        components: { print },
		emits: ['success', 'closed'],
        props:{
            query: { type: String, default: "" },
        },
		data() {
			return {
				mode: "add",
				titleMap: {
					add: '查看委外合同单',
					edit: '修改生产任务',
					show: '查看'
				},
                dialog: {
				    save: false,
                    pit:false,
			    },
				visible: false,
				isSaveing: false,
                table:[],
                selection: [],
                search: {
                    time_range: null,
                    keyword: null,
                },
                apiObj:this.$API.produce.contract.viewContract,
			}
		},
		mounted() {
		},
		methods: {
			//显示
			open(mode='add'){
				this.mode = mode;
				this.visible = true;
				return this
			},
			//表单注入数据
			async setData(data){
                console.log('data :>> ', data);
			},
            selectionChange(selection) {
                this.selection = selection;
            },
            // 打印
            async print(){
                let ids = []
                this.selection.map(item=>{
                    ids.push(item.contract_no)
                })
                var reqData = { contract_no_arr:ids };
                var res = await this.$API.print.loomBarcodePrint.get(reqData);
                if (res.code == 1) {
                    this.$refs.pitDialog.init(res.data);
                } else {
                    this.$alert(res.message, "提示", { type: "error" });
                }
            },
		}
	}
</script>

<style lang="scss"></style>
